<template>
  <a-flex justify="center" align="center" class="home_header_box" gap="large">
    <span>{{ web_title }}</span>
    <Clock/>
  </a-flex>
</template>
<script setup>

import Clock from "@/components/Clock.vue";
import * as home from '@/api/home/index'
import {message} from "ant-design-vue";
import {onMounted, ref} from "vue";

let web_title = ref("WebTab");

const fetchSettingByKey = async (key) => {
  try {
    const response = await home.getSettingByKey(key);
    return response.data.value;
  } catch (error) {
    message.error(`获取 ${key} 失败`, error);
    return ''
  }
};

onMounted(async () => {
  web_title.value = await fetchSettingByKey('title');
});
</script>


<style scoped>
.home_header_box {
  font-size: 3rem;
  color: #0054cd;
}
</style>